<template>
    <div class="detail-info">
        <div class="detail-info-item" v-for="item in dataList" :key="item.label">
            <div class="label">{{ item.label }}：</div>
            <div class="value">{{ item.value }}</div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'DetailInfo',
    props: {
        dataList: Array
    }
}
</script>
<style scoped lang="scss">
.detail-info {
    display: flex;
    flex-wrap: wrap;

    .detail-info-item {
        width: 390px;
        display: flex;
        align-items: center;
        margin: 16px 0;

        .label {
            width: 100px;
            font-weight: 500;
            font-size: 16px;
            color: #8B8B8B;
            line-height: 16px;
            white-space: nowrap;
            margin-right: 5px;
        }
        .value{
            font-weight: 500;
            font-size: 16px;
            color: #4B4B4B;
            line-height: 16px;
        }
    }
}
</style>